import React, { Component } from 'react';
import { message, Icon } from 'antd';
import { getPassiveDetectionList, changePassiveStatus } from '@api/passiveDetection';
import PassiveDetectionModal from './components/passive-detection-modal';
import PassiveDetectionTable from './components/passive-detection-table';
import _ from 'lodash';
import './index.less';

const prefixCls = 'passive-detection-config';

class PassiveDetectionConfig extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filter: {
        page: 1,
        pageSize: 10,
        search: ''
      },
      data: [],
      rowData: {},
      visible: false,
      loading: false
    };
  }
  componentDidMount() {
    this.getPassiveDetectionList();
  }

  getPassiveDetectionList = () => {
    const { filter } = this.state;
    this.setState({ loading: true });
    getPassiveDetectionList(filter)
      .then(res => {
        const data = _.get(res, 'data.data.list', []);
        const count = _.get(res, 'data.data.count', 0);
        this.setState({ data, count, loading: false });
      })
      .catch(() => {
        message.error('获取被动探测列表失败');
        this.setState({ loading: false });
      });
  };

  changeModalVisible = (visible, rowData = {}) => {
    this.setState({ visible, rowData });
  };

  changePassiveStatus = rowData => {
    const { status, _id: id, ip } = rowData;
    const body = { status: !status, id, ip };
    this.setState({ loading: true });
    changePassiveStatus(body)
      .then(() => {
        this.getPassiveDetectionList();
      })
      .catch(() => {
        message.error('修改状态失败');
        this.setState({ loading: false });
      });
  };

  onPaginationChange = (page, pageSize) => {
    const { filter } = this.state;
    this.setState(
      {
        filter: {
          ...filter,
          page,
          pageSize
        }
      },
      this.getPassiveDetectionList
    );
  };

  render() {
    const { filter, visible, rowData, data, count, loading } = this.state;
    const pagination = {
      total: count,
      current: filter.page,
      pageSize: filter.pageSize,
      showQuickJumper: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showSizeChanger: true,
      size: 'small',
      showTotal: num => `共 ${num} 条`,
      onChange: this.onPaginationChange,
      onShowSizeChange: this.onPaginationChange
    };
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-page-title`}>被动探测配置</div>
        <div className={`${prefixCls}-tips`}>
          <Icon type="info-circle" theme="twoTone" twoToneColor="#fc8e49" />
          &nbsp;
          被动探测配置：配置被动探测引擎，将引擎在镜像流量中收集到的资产IP信息和指纹信息自动补充到资产管理列表。
        </div>
        <div className={`${prefixCls}-count`}>当前有&quot;{count || 0}&quot;个被动探测引擎</div>
        <PassiveDetectionTable
          data={data}
          loading={loading}
          pagination={pagination}
          onEdit={rowData => this.changeModalVisible(true, rowData)}
          onChangeStatus={rowData => this.changePassiveStatus(rowData)}
        />
        <PassiveDetectionModal
          data={rowData}
          visible={visible}
          loadList={this.getPassiveDetectionList}
          onClose={() => this.changeModalVisible(false)}
        />
      </div>
    );
  }
}

export default PassiveDetectionConfig;
